<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__UI__/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="__UI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__UI__/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">产品总销售额</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="sums_one" style="font-size: 30px;line-height: 60px">
                            ****
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">产品总订单量</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="sums_two" style="font-size: 30px;line-height: 60px">
                           ****
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">本年度故障条数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="sums_three" style="font-size: 30px;line-height: 60px">
                           ****
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">订单退款率</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="sums_four" style="font-size: 30px;line-height: 60px">
                            ****
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>


</div>
<!--</div>-->
<script src="__UI__/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="__UI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="__UI__/js/Echarts.min.js" charset="utf-8"></script>

<script>
    var $ = layui.jquery;

    /*************************************** 订单销售额 ***************************************/
    $.ajax({
        url:'{:url("admin/views/view_ordprice_sums")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log(res);
            var sum = 0;
            for (let i = 0; i <res.length ; i++) {
                var a = parseInt(res[i].sums);
                sum +=a;
            }
            document.getElementById("sums_one").innerHTML = "￥" + sum;
            console.log(sum);
        },
        error:function(){
            //请求出错处理
        }
    });

    /*************************************** 订单数 ***************************************/
    $.ajax({
        url:'{:url("admin/views/sp_order")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log(res);
            var sum = 0;
            for (let i = 0; i <res.length ; i++) {
                sum =res.length;
            }
            document.getElementById("sums_two").innerHTML = sum + "单" ;
            console.log(sum);
        },
        error:function(){
            //请求出错处理
        }
    });

    /*************************************** 故障数 ***************************************/
    $.ajax({
        url:'{:url("admin/views/sp_fault")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log(res);
            var sum = 0;
            for (let i = 0; i <res.length ; i++) {
                sum =res.length;
            }
            document.getElementById("sums_three").innerHTML = sum + "条" ;
            console.log(sum);
        },
        error:function(){
            //请求出错处理
        }
    });

    /*************************************** 订单退款率 ***************************************/
    $.ajax({
        url:'{:url("admin/views/view_ordstatus_sums")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log(res);
            var sum = 0;
            var tuikuan_status = 0;
            var fau_status_sum = 0;
            for (let i = 0; i <res.length ; i++) {
                sum +=res[i].nums;
                tuikuan_status = res[3].nums/sum;
                fau_status_sum =(Math.round(tuikuan_status*10000))/100+'%';//小数转换百分比
            }
            document.getElementById("sums_four").innerHTML = fau_status_sum ;
            console.log(fau_status_sum);
        },
        error:function(){
            //请求出错处理
        }
    });

    /*************************************** 柱状图 ***************************************/
    $.ajax({
        url:'{:url("admin/views/view_pro_sums")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log("各类产品销售数量统计");
            console.log(res);

            var Bardata_name=[];
            var Bardata_value=[];

            for (let i = 0; i <res.length ; i++) {

                var obj=new Object();
                var obj2=new Object();
                obj.value=res[i].pro_name;
                obj2.value=res[i].nums;

                Bardata_name[i]=obj;
                Bardata_value[i]=obj2;

            }

            var chartDom = document.getElementById('echarts-records');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    left: 'center',
                    text: '各类产品销售数量统计图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: Bardata_name,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '总销量',
                        type: 'bar',
                        barWidth: '60%',
                        data: Bardata_value
                    }
                ]
            };
            option && myChart.setOption(option);

        },
        error:function(){
            alert("各类产品销售数量统计数据获取失败")
        }
    });

    /*************************************** 饼图 ***************************************/
    $.ajax({
        url:'{:url("admin/views/view_per_sums")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log("顾客分布地区统计");
            console.log(res);

            var Piedata=[];

            for (let i = 0; i <res.length ; i++) {

                var obj=new Object();
                obj.name=res[i].province;
                obj.value=res[i].nums;

                Piedata[i]=obj;
            }

            var chartDom = document.getElementById('echarts-pies');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '顾客分布地区统计图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '顾客数量',
                        type: 'pie',
                        radius: '50%',
                        data:Piedata
                        ,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

        },
        error:function(){
            alert("顾客分布地区统计数据获取失败")
        }
    });

    /*************************************** 面积图 ***************************************/

    $.ajax({
        url:'{:url("admin/views/view_employee_sums")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log("员工签到状态统计");
            console.log(res);

            var MoreLinedata_momth=[];
            var MoreLinedata_empSignin=[];
            var MoreLinedata_empNosign=[];
            var MoreLinedata_empLeave=[];
            var MoreLinedata_empAbsent=[];

            for (let i = 0; i <res.length ; i++) {
                var obj=new Object();
                var obj2=new Object();
                var obj3=new Object();
                var obj4=new Object();
                var obj5=new Object();

                obj.value=res[i].emp_mm + '月';
                obj2.value=res[i].emp_signin;
                obj3.value=res[i].emp_nosign;
                obj4.value=res[i].emp_leave;
                obj5.value=res[i].emp_absent;

                MoreLinedata_momth[i]=obj;
                MoreLinedata_empSignin[i]=obj2;
                MoreLinedata_empNosign[i]=obj3;
                MoreLinedata_empLeave[i]=obj4;
                MoreLinedata_empAbsent[i]=obj5;
            }

            var chartDom = document.getElementById('echarts-dataset');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                color: ['#80FFA5', '#FFBF00', '#37A2FF', '#FF0087'],
                title: {
                    text: '本年度员工签到状态统计图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['正常签到', '未签到', '缺勤', '请假']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: MoreLinedata_momth
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '正常签到',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(128, 255, 165)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 191, 236)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: MoreLinedata_empSignin
                    },
                    {
                        name: '未签到',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(255, 191, 0)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(224, 62, 67)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: MoreLinedata_empNosign
                    },
                    {
                        name: '缺勤',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(55, 162, 255)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(116, 21, 219)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: MoreLinedata_empLeave
                    },
                    {
                        name: '请假',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(255, 0, 135)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(135, 0, 157)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: MoreLinedata_empAbsent
                    }
                ]
            };

            option && myChart.setOption(option);

        },
        error:function(){
            alert("员工签到状态统计数据获取失败")
        }
    });

    /*************************************** 折线图 ***************************************/
    $.ajax({
        url:'{:url("admin/views/getfau_sums")}',
        dataType:"json",
        async:true,
        type:"post",
        success:function(res){
            console.log("本年度故障信息统计");
            console.log(res);

            var Linedata_momth=[];
            var Linedata_value=[];

            for (let i = 0; i <res.length ; i++) {
                var obj=new Object();
                var obj2=new Object();
                obj.value=res[i].mm + '月';
                obj2.value=res[i].nums;

                Linedata_momth[i]=obj;
                Linedata_value[i]=obj2;

            }
            var chartDom = document.getElementById('echarts-map');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    left: 'center',
                    text: '本年度故障信息统计图'
                },
                xAxis: {
                    type: 'category',
                    data: Linedata_momth
                },
                yAxis: {
                    type: 'value'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        data:Linedata_value,
                        type: 'line',
                        smooth: true
                    }
                ]
            };

            option && myChart.setOption(option);



        },
        error:function(){
            alert("各类产品销售数量统计数据获取失败")
        }
    });

        // echarts 窗口缩放自适应
        // window.onresize = function () {
        //     echartsRecords.resize();
        // }
</script>
</body>
</html>
